<!DOCTYPE html>
<html>
<head>
    <title>菜单管理</title>
    #parse("sys/header.html")
    <style>
        body {
            padding: 10px;
        }

        #gen-page {
            display: none;
        }

        .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
            background: none;
        }

        .backup .del {
            position: absolute;
            top: 0;
            right: -30px;
            display: none;
        }

        .backup .input:hover .del {
            /*display: block;*/
        }

    </style>
</head>
<body>
<div id="toolbar">
    <div class="btn-group" role="group" aria-label="...">
    </div>


</div>
<div id="gen-page">
    <form class="form-horizontal">
        <input type="hidden" name="id" value="{{=it._id}}">
        <div class="form-group">
            <label class="col-sm-2 control-label">主线路</label>
            <div class="col-sm-10">
                <input name="interfaceUrl" class="form-control" value="{{=it.interfaceUrl}}">
            </div>
        </div>
        {{~it.backupInterfaces:value:index}}
        <div class="form-group backup">
            <label class="col-sm-2 control-label">
                <input name="label" class="form-control url" value="{{=value.label}}">
            </label>
            <div class="col-sm-10 input">
                <input name="url" class="form-control url" value="{{=value.url}}">
                <a onclick="vm.delBackup(this)" class="btn btn-danger  del"><i
                        class="glyphicon glyphicon-remove"></i></a>
            </div>
        </div>
        {{~}}
    </form>

</div>

<table id="table"/>
<script>
    $(function () {
        Waves.init();


        var table = $("#table");
        table.bootstrapTable({
            url: "/sys/videoSupplier/page",//请求数据url
            idField: "id",
            showHeader: true,
            showColumns: false,
            striped: true,
            showRefresh: false,
            pagination: true,//分页
            sidePagination: 'server',//服务器端分页
            toolbar: "#toolbar",
            pageNumber: 1,
            paginationLoop: false,
            smartDisplay: false,
            method: "post",
            ajaxOptions: {
                contentType: "application/json; charset=utf-8"
            },
            pageList: [5, 10, 20, 50],//分页步进值
            search: false,//显示搜索框
            clickToSelect: "true",
            paginationPreText: "上一页",
            paginationNextText: "下一页",
            selectItemName: "id",
            paginationDetailHAlign: 'right',
            silent: true, //刷新事件必须设置
            formatLoadingMessage: function () {
                return "请稍等，正在加载中...";
            },
            formatNoMatches: function () { //没有匹配的结果
                return '无符合条件的记录';
            },
            columns: [
                {
                    checkbox: true
                }, {
                    field: 'label',
                    title: '名称'
                }, {
                    field: 'url',
                    title: '首页'
                }, {
                    field: 'support',
                    title: '是否支持',
                    formatter: function (value, row, index) {
                        if (value) {
                            return "是";
                        } else {
                            return "否";
                        }
                    }
                }, {
                    field: 'operate',
                    title: '操作',
                    width: "200px",
                    clickToSelect: false,
                    events: {
                        'click .edit': function (e, value, row, index) {
                            vm.open(row)
                        }
                    },
                    formatter: function (value, row, index) {
                        return "<a class='btn btn-success edit'>修改接口地址</a>"
                    }
                }]
        });


        window.vm = new Vue({
            el: "#toolbar",
            data: {},
            methods: {
                delBackup: function (el) {
                    bootbox.confirm({
                        size: "small",
                        message: "是否删除?",
                        callback: function (result) {
                            if (result) {
                                $(el).closest(".backup").remove();
                            }
                        }
                    });

                },
                open: function (data) {


                    var html = doT.template($("#gen-page").html())(data);

                    var obj = {};
                    obj.dialog = bootbox.dialog({
                        title: '修改接口地址',
                        message: html,
                        buttons: {
                            cancel: {
                                label: "取消",
                                className: 'btn-danger waves-effect',
                                callback: function () {
                                    console.log(arguments)
                                }
                            },
                            ok: {
                                label: "修改",
                                className: 'btn-info waves-effect',
                                callback: function () {
                                    var id = obj.dialog.find("input[name='id']").val();
                                    var interfaceUrl = obj.dialog.find("input[name='interfaceUrl']").val()
                                    var backups = obj.dialog.find("div.backup");
                                    var backupsData = [];
                                    $.each(backups, function (i, e) {
                                        var label = $(e).find("input[name='label']").val();
                                        var url = $(e).find("input[name='url']").val();
                                        backupsData.push({label: label, url: url})
                                    });

                                    $.ajax({
                                        url:"/sys/videoSupplier/updateInterfaceUrl",
                                        type: "post",
                                        success: function (result) {
                                            table.bootstrapTable("refresh");
                                            if (!result) {
                                                bootbox.alert(result.msg);
                                            }
                                        },
                                        data: JSON.stringify({
                                            _id: id,
                                            interfaceUrl: interfaceUrl,
                                            backupInterfaces: backupsData
                                        }),
                                        contentType: "application/json; charset=utf-8",
                                        dataType: "json"
                                    });
                                }
                            }
                        }
                    });


                }
            }
        });
    })
</script>
</body>
</html>
